
import React from "react";
import { FormControl } from "../../utils/form/FormControl";



/** 拖拽字段排序事件 */
export interface DragFieldSortEvent {
    /** 拖拽字段 */
    drag: string;
    /** 放置字段 */
    drop: string;
    /** 前置还是后置 */
    action: 'before' | 'after'|'';
    /** 拖拽字段id */
    // dragId: string | number;
    /** 放置字段id */
    // dropId: string | number;
}

interface Params {
    dropRef: React.RefObject<HTMLDivElement>,
    formControl: FormControl,
}

/** 拖拽字段排序事件 */
const dragFieldSort: DragFieldSortEvent = {drag:'', drop: '', action: ''};

/** 拖拽 */
export const useDrag = (params: Params) => {


    React.useEffect(() => {

        const { formControl } = params;
        
        /** 拖拽完成 */
        const sendDragEvent = () => {
            if(formControl.data.editInstance){
                const filedKey = dragFieldSort.drag;
                const targetFieldKey = dragFieldSort.drop;
                const action = dragFieldSort.action;
                formControl.data.editInstance.sortFields(filedKey, targetFieldKey, action);
            }
        };
        /** 拖拽元素 */
        const dropEle = params.dropRef.current;
        if (dropEle === null) {
            return;
        }
        /** 标签元素 */
        const labelEle = dropEle.querySelector('.label') as HTMLDivElement;
        /** 控制器元素 */
        const controlEle = dropEle.querySelector('.control') as HTMLDivElement;
        if (labelEle === null || controlEle === null) {
            return;
        }
        // 是否可拖拽
        if (formControl.controlData.draggable === false) {
            return;
        }
        // 添加拖拽属性
        dropEle.setAttribute('draggable', 'true');

        // 监听拖拽开始事件
        dropEle.addEventListener('dragstart', (event) => {
            // event.preventDefault();
            dropEle.classList.add('dragging');
            dragFieldSort.drag = formControl.controlData.key ?? '';
            // if(formControl.data.fieldData){
            //     dragFieldSort.dragId = formControl.data.fieldData.id;
            // }
            if(event.dataTransfer){
                // 在拖拽开始时设置数据
                event.dataTransfer.setData('dragKey', dragFieldSort.drag);
            }
        });
        dropEle.addEventListener('dragend', (event) => {
            event.preventDefault();
            dropEle.classList.remove('dragging');
            dragFieldSort.drag = '';
            dragFieldSort.action = '';
            dragFieldSort.drop = '';
            // dragFieldSort.dragId = '';
            // dragFieldSort.dropId = '';
        });

        /** 向前插入 */
        labelEle.addEventListener('dragover', (event) => {
            event.preventDefault();
            if (event.dataTransfer) {
                event.dataTransfer.dropEffect = 'move';
            }
        });
        labelEle.addEventListener('dragenter', (event) => {
            event.preventDefault();
            labelEle.classList.add('dragover');
        });
        labelEle.addEventListener('dragleave', (event) => {
            event.preventDefault();
            labelEle.classList.remove('dragover');
        });
        // 放置数据
        labelEle.addEventListener('drop', (event) => {
            event.preventDefault();
            labelEle.classList.remove('dragover');
            dragFieldSort.action = 'before';
            dragFieldSort.drop = formControl.controlData.key ?? '';
            // if(formControl.data.fieldData){
            //     dragFieldSort.dropId = formControl.data.fieldData.id;
            // }
            sendDragEvent();
        });


        /** 向后插入 */
        controlEle.addEventListener('dragover', (event) => {
            event.preventDefault();
            if (event.dataTransfer) {
                event.dataTransfer.dropEffect = 'move';
            }
            controlEle.classList.add('dragover');
        });
        controlEle.addEventListener('dragenter', (event) => {
            event.preventDefault();
            controlEle.classList.add('dragover');
        });
        controlEle.addEventListener('dragleave', (event) => {
            event.preventDefault();
            controlEle.classList.remove('dragover');
        });
        // 放置数据
        controlEle.addEventListener('drop', (event) => {
            event.preventDefault();
            controlEle.classList.remove('dragover');
            dragFieldSort.action = 'after';
            dragFieldSort.drop = formControl.controlData.key ?? '';
            // if(formControl.data.fieldData){
            //     dragFieldSort.dropId = formControl.data.fieldData.id;
            // }
            sendDragEvent();
        });



        return () => { };
    }, []);


}